<template>
    <div v-loading="loading">

    </div>
</template>

<script>

    export default {
        data() {
            return {
                loading: false,
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {

            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .main_content {
        .count_block {
            text-align: center;
            color: #fff;

            .el-col {
                height: 100%;
            }

            .first,
            .second,
            .third,
            .fourth {
                height: 100%;
                padding: 20px 35px;
            }

            .first {
                background: linear-gradient(to left, #75f, #06f);
            }

            .second {
                background: linear-gradient(to left, #338faa, #75f);
            }

            .third {
                background: linear-gradient(to left, #33bb4a, #338faa);
            }

            .fourth {
                background: linear-gradient(to left, #bb7e33, #33bb4a);
            }

            .title {
                font-weight: bold;
                font-size: 16px;
            }

            .content {
                font-size: 18px;
                line-height: 35px;
                padding: 5px 0;
            }

            .sub {
                font-size: 12px;
                display: inline-block;
                width: 100%;

                label {
                    width: 50%;
                    float: left;
                    line-height: 22px;

                    &:nth-child(odd) {
                        text-align: left;
                    }

                    &:nth-child(even) {
                        text-align: right;
                    }
                }
            }

            font {
                font-size: 26px;
            }

            #month_chart {
                width: 100%;
            }
        }
    }
</style>
